<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>three demo</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
  </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
  <script type="text/javascript" src="./js/orbitControls.js"></script>
</head>

<body>

  <script>
    let scene, camera, renderer, controls, guiControls;


    /* 初始加载 */
    window.onload = function () {
      init();
      animate();
    }

    /* 初始化 */
    function init() {

      initScene();
      initCamera();
      initRender();
      initControls();
      initContent();

      /* 监听事件 */
      window.addEventListener('resize', onWindowResize, false);

    }

    /* 场景 */
    function initScene() {

      scene = new THREE.Scene();

    }

    /* 相机 */
    function initCamera() {

      // camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
      camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 10, 5000);
      camera.position.set(30, 20, 50);
      camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    /* 渲染器 */
    function initRender() {

      renderer = new THREE.WebGLRenderer({
        antialias: true
      });
      renderer.setSize(window.innerWidth, window.innerHeight);

      document.body.appendChild(renderer.domElement);

    }


    /* 控制器 */
    function initControls() {

      controls = new THREE.OrbitControls(camera, renderer.domElement);

      /* 属性参数默认 */

    }

    /* 场景中的内容 */
    function initContent() {

      let dir = new THREE.Vector3(0, 2, 0);

      dir.normalize();

      let origin = new THREE.Vector3(0, 0, 0);
      let length = 5;
      let hex = 0xff0000;

      let arrowHelper = new THREE.ArrowHelper(dir, origin, length, hex);
      scene.add(arrowHelper);

      let texture = new THREE.TextureLoader().load('scenery.jpg');

      let sphereGeometry = new THREE.SphereGeometry(1000, 50, 50);
      sphereGeometry.scale(-1, 1, 1);

      let sphereMaterial = new THREE.MeshBasicMaterial({
        map: texture
      });

      let sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);

      scene.add(sphere);

    }

    /* 窗口变动触发 */
    function onWindowResize() {

      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);

    }



    /* 循环渲染 */
    function animate() {

      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    }


  </script>
</body>

</html>